<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <style>

  </style>
</head>
<body>
  <canvas id="mycanvas" width="1000" height="800"></canvas>
  <script>
    var canvas = document.getElementById("mycanvas")
    var ctx = canvas.getContext("2d")
    function drawRect(ctx,x,y,w,h,color){
      ctx.fillStyle = color
      ctx.fillRect(25,25,100,100)
    }

    //三角形
    function drawTriangle(ctx){
      ctx.beginPath()       //新建一条路径
      ctx.moveTo(175,50)    //移动笔触
      ctx.lineTo(200,75)    //绘制一条直线
      ctx.lineTo(200,25)
      ctx.fill()
    }

    //三角形
    function drawTriangle2(ctx){
      ctx.beginPath()
      ctx.moveTo(225,50)
      ctx.lineTo(250,10)
      ctx.lineTo(250,90)
      ctx.closePath()
      ctx.stroke()
    }

    //画个脸
    function drawFace(ctx){
      ctx.beginPath();
      ctx.arc(320,100,50,0,Math.PI*2,true);
      ctx.moveTo(360,100);
      ctx.arc(320,100,40,0,Math.PI,false)
      ctx.stroke()
    }

    //二、三 次贝塞尔曲线
    //quadraticCurveTo,
    function bezier(ctx){
      ctx.beginPath();
      ctx.moveTo(75,25);
      ctx.quadraticCurveTo(25,25,25,62.5);
      ctx.quadraticCurveTo(25,100,50,100);
      ctx.quadraticCurveTo(50,120,30,125);
      ctx.quadraticCurveTo(60,120,65,100);
      ctx.quadraticCurveTo(125,100,125,62.5);
      ctx.quadraticCurveTo(125,25,75,25);
      ctx.stroke();
    }

    //三次贝塞尔曲线画心
    function heart(ctx){
      ctx.fillStyle = "red"
      ctx.beginPath();
      ctx.moveTo(75,40);
      ctx.bezierCurveTo(75,37,70,25,50,25);
      ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
      ctx.bezierCurveTo(20,80,40,102,75,120);
      ctx.bezierCurveTo(110,102,130,80,130,62.5);
      ctx.bezierCurveTo(130,62.5,130,25,100,25);
      ctx.bezierCurveTo(85,25,75,37,75,40);
      ctx.fill();
    }
    // drawRect(ctx,25,25,100,100, "rgba(0,0,200,0.5)")
    // drawTriangle(ctx)
    // drawTriangle2(ctx)
    // drawFace(ctx)
    // bezier(ctx)
    heart(ctx)
  </script>
</body>
</html>
